<template>
  <div style="background:white; width: 700px; margin: 60px auto; padding: 20px 50px">
    <h1 style="margin: 30px auto;text-align: center;">找回密码</h1>
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="用户名称" prop="username">
          <el-input v-model="ruleForm.username"></el-input>
        </el-form-item>


        <el-form-item label="电话" prop="phonenum">
          <el-input v-model="ruleForm.phonenum"></el-input>
        </el-form-item>


        <div style="margin-top:30px;margin-left: 160px ">
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </div>

      </el-form>

    </div>
  </div>
</template>

<!--  以下是修改相册弹出的框-->


<el-dialog title="修改商品基本信息" :visible.sync="dialogFormVisible">
<el-form :model="ruleForm" :rules="rules">
  <el-form-item label="密码" prop="password">
    <el-input v-model="ruleForm.password" show-password></el-input>
  </el-form-item>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submitEditForm()">确 定</el-button>
  </div>
</el-form>
</el-dialog>


<style>
body {
  background: url("/src/assets/空境.jpg");
}
</style>

<script>
export default {
  data() {
    return {
      ruleForm: {
        uid: '',
        username: '',
        password: '',
        phonenum: '',
      },
      rules: {
        username: [
          {required: true, message: '请输入用户名', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur'}
        ],
        phonenum: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确的电话号码',
            trigger: 'blur'
          }
        ]
      },
    }
  },
  methods: {
    submitEditForm() {
      let url = 'http://localhost:9080/users/' + this.editForm.id + '/update';
      console.log('url=' + url);

      let formData = this.qs.stringify(this.editForm);

      this.axios.post(url, formData).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改成功！',
            type: 'success'
          });
          this.dialogFormVisible = false;
          this.$router.replace('/');
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.resetForm('ruleForm');
            }
          });
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let url = 'http://localhost:9080/user/' + this.username;
          console.log('url = ' + url);x

          this.axios.post(url).then((response) => {
            let jsonResult = response.data;
            console.log(jsonResult);
            if (jsonResult.state == 20000 || jsonResult.data().phonenum == this.phonenum) {
              this.$message({
                showClose: true,
                message: '验证通过！',
                type: 'success'
              });
              this.dialogFormVisible = true;
            } else {
              this.$alert("用户名或绑定手机号输入错误", '操作失败', {
                confirmButtonText: '确定',
                callback: action => {
                  this.resetForm('ruleForm');
                }
              });
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  }
}
</script>

<style scoped>

</style>